<template>
  <div class="my-swiper">
    <div class="relative content">
      <template v-for="(item, index) in items" :key="index">
        <div class="relative h-full" v-show="item === selectedItem">
          <img
            class="absolute img-circle"
            :src="getAssetsFile(`${item}-0.png`)"
            alt="circle1"
          />
          <img
            class="absolute slideUp"
            :class="`img-people${item}`"
            :src="getAssetsFile(`${item}-1.png`)"
            alt="people"
          />
          <img
            class="absolute img-right slideInRight"
            :src="getAssetsFile(`${item}-2.png`)"
            alt="right1"
          />
          <img
            class="absolute img-left slideInLeft"
            :src="getAssetsFile(`${item}-3.png`)"
            alt="left1"
          />
        </div>
      </template>
      <!-- pagination -->
      <div
        class="absolute z-10 flex items-center justify-center circle-pagination"
      >
        <div
          class="circle-dot"
          v-for="(item, index) in items"
          :key="item"
          :class="{ active: item === selectedItem }"
          @click="selectItem(index)"
        ></div>
      </div>
      <!-- arrows -->
      <img
        :src="getAssetsFile('arrow_left.png')"
        class="leftArrow"
        @click="toggle('prev')"
      />
      <img
        :src="getAssetsFile('arrow_right.png')"
        class="rightArrow"
        @click="toggle('next')"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import 'animate.css'
import 'animate.css/animate.compat.css'

const items = ref([1, 2, 3, 4, 5])
const selectedItem = ref(1)
let currentIndex = 0
let interval
const selectItem = (index) => {
  selectedItem.value = items.value[index]
  currentIndex = index // 更新当前索引为点击的索引
  clearInterval(interval) // 清除之前的定时器
  startInterval() // 重新启动定时器
}
const startInterval = () => {
  interval = setInterval(() => {
    currentIndex = (currentIndex + 1) % items.value.length
    selectItem(currentIndex)
  }, 4000)
}
const toggle = (sign) => {
  if (sign === 'prev') {
    selectedItem.value =
      selectedItem.value - 1 === 0 ? 5 : selectedItem.value - 1
  } else {
    selectedItem.value =
      selectedItem.value + 1 === 6 ? 1 : selectedItem.value + 1
  }
  clearInterval(interval) // 清除之前的定时器
  startInterval() // 重新启动定时器
}
onMounted(() => {
  startInterval() // 启动定时器
})

onBeforeUnmount(() => {
  clearInterval(interval) // 清除定时器
})

onDeactivated(() => {
  return () => clearInterval(interval)
})

function getAssetsFile(url) {
  return new URL(`../assets/${url}`, import.meta.url)
}
</script>

<style lang="scss" scoped>
.my-swiper {
  height: 770px;
  width: 100%;
  position: relative;
  .content {
    width: 1260px;
    height: 770px;
    margin: 0 auto;
  }
}
.img-circle {
  top: -96px;
  left: 50%;
  transform: translateX(-50%);
  width: 998px;
  height: 876px;
  z-index: 0;
  animation: left_outs 0.3s linear 0s 1 alternate forwards;
}
.img-people1 {
  bottom: 60px;
  left: 750px;
  z-index: 1;
}
.img-people2 {
  bottom: 60px;
  left: 750px;
  z-index: 1;
}
.img-people3 {
  bottom: 50px;
  left: 760px;
  z-index: 1;
}
.img-people4 {
  bottom: 60px;
  left: 770px;
  z-index: 1;
}
.img-people5 {
  bottom: 60px;
  left: 750px;
  z-index: 1;
}
.img-right {
  right: 0;
  top: 0;
  z-index: 2;
}
.img-left {
  left: 0;
  top: 0;
  z-index: 2;
}

.leftArrow {
  position: absolute;
  top: 50%;
  left: -66px;
  z-index: 100;
  transform: translateY(-50%);
  cursor: pointer;
}

.rightArrow {
  position: absolute;
  top: 50%;
  right: -66px;
  z-index: 100;
  transform: translateY(-50%);
  cursor: pointer;
}
.title {
  height: 116px;
  background-position: center;
  background-repeat: no-repeat;
  &.title1 {
    background-image: url(../assets/title1-1.png);
  }
  &.title2 {
    background-image: url(../assets/title1-2.png);
  }
  &.title3 {
    background-image: url(../assets/title1-3.png);
  }
  &.title4 {
    background-image: url(../assets/title1-4.png);
  }
  &.title5 {
    background-image: url(../assets/title1-5.png);
  }
}
.circle-pagination {
  bottom: 0;
  left: 0;
  right: 0;
  height: 53px;
  .circle-dot {
      margin: 0 3px;
      cursor: pointer;
      width: 53px;
      height: 53px;
      background: url(../assets/bullet_off.png) no-repeat center;
      &.active {
        background-image: url(../assets/bullet_on.png);
      }
    }
}
.slideUp {
  animation: slideUp 0.2s ease-in 0s forwards;
}
.slideInRight {
  animation: slideInRight 0.5s ease-in 0s forwards;
}
.slideInLeft {
  animation: slideInLeft 0.3s ease-in 0s forwards;
}

@keyframes left_outs {
  0% {
    transform: translateX(calc(-50% + 20px));
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    filter: alpha(opacity=0);
  }

  100% {
    transform: translateX(-50%);
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
@keyframes slideUp {
  0% {
    transform: translateY(30px);
    opacity: 0;
    filter: alpha(opacity=0);
  }

  100% {
    transform: translateY(0);
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
</style>
